<template>
  <div class="leave-message-item">
    <div class="question-box">
      <div>
        <img
          :src="questionImg"
          alt=""
          class="title"
        >
        <span class="quesion">{{questionInfo.content}}</span>
      </div>
      <div class="img-box">
        <img
          :src="item"
          alt=""
          @click="showPreviewImg"
          v-for="(item,index) in questionInfo.imgList"
          :key="index"
        >
      </div>
    </div>
    <div class="answer-box" >
      <div  v-if="answerInfo.content" class="answer-detail-box">
        <img
          :src="answerImg"
          alt=""
          class="title"
        >
        <span class="answer" v-html="answerInfo.content"></span>
      </div>
      <span class="time">{{answerInfo.createTime}}</span>
    </div>
    <van-image-preview
      v-model="show"
      :images="questionInfo.imgList"
      @change="onChange"
    >
      <template v-slot:index>第{{ index+1 }}页</template>
    </van-image-preview>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { mapGetters } from "vuex";
import apiMessage from "@/common/api/apiMessage";
export default {
  name: "LeaveMessageDetail",
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  data() {
    return {
      message: "",
      takePhotoImg: require("../common/imgs/take-photo.png"),
      questionImg: require("../common/imgs/quesion-icon.png"),
      answerImg: require("../common/imgs/answer-icon.png"),
      show: false,
      index: 0,
      id: "",
      questionInfo: {},
      answerInfo: {},
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getDetaulInfo();
    }
  },
  methods: {
    getDetaulInfo() {
      this.$toast.loading();
      apiMessage
        .getMessageDetail({
          id: this.id,
          userId: this.userInfo.userId,
        })
        .then((data) => {
          this.$toast.clear();
          this.loading = false;
          if(!data.data.length){
            return
          }
          for(let index in data.data){
            if(data.data[index].imgs){
               this.$set(data.data[index], "imgList", data[index].imgs.split(','));
            }
          }
          if(data.data[0]){
            this.questionInfo = data.data[0]
          }
          if(data.data[1]){
            this.answerInfo = data.data[1]
          }
          console.log(this.questionInfo)
        });
    },
    onChange(index) {
      this.index = index;
    },
    showPreviewImg() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.leave-message-item {
  padding: 24px;
  background: #ffffff;
  box-sizing: border-box;
  .question-box,
  .answer-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    > div {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      .title {
        width: 40px;
        height: 40px;
      }
      .quesion,
      .answer {
        font-size: 28px;
        color: #222222;
        line-height: 40px;
        margin: 0 16px;
        flex: 1;
      }
      .question-img {
        width: 120px;
        height: 120px;
        background: #d8d8d8;
        border-radius: 16px;
      }
    }
    .question-box {
      margin-bottom: 24px;
    }
    .img-box {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      width: 100%;
      padding-left: 48px;
      box-sizing: border-box;
      margin-top: 24px;
      img {
        width: 160px;
        height: 160px;
        background: #d8d8d8;
        border-radius: 16px;
        margin-right: 16px;
        margin-bottom: 16px;
        overflow: hidden;
      }
    }
  }
  .answer-box {
    margin-top: 24px;
    .answer-img {
      width: 120px;
      height: 1;
    }
  }
  .answer-detail-box{
    margin-bottom: 56px;
  }
  .time {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding-left: 48px;
    font-size: 22px;
    color: #cccccc;
    line-height: 32px;
    text-align: right;
  }
}
</style>
